<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树型目录结构</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #369;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
            color: #fff;
            user-select: none;
            cursor: pointer;
        }
    </style>


</head>

<body>
    <ul id="tree" >

    </ul>


    <script>
        var tree = [{
                name: 'IT互联网',
                children: [{
                        name: '后端开发',
                        children: [{
                                name: '后端开发',
                                children: [

                                ]
                            },
                            {
                                name: '前端开发',
                                children: []
                            },
                            {
                                name: '移动开发',
                                children: []
                            },
                            {
                                name: '游戏开发',
                                children: []
                            }

                        ]
                    },
                    {
                        name: '前端开发',
                        children: []
                    },
                    {
                        name: '移动开发',
                        children: []
                    },
                    {
                        name: '游戏开发',
                        children: []
                    }
                ]
            },
            {
                name: 'UI设计',
                children: [{
                        name: 'PC端设计',
                        children: []
                    },
                    {
                        name: '移动端设计',
                        children: []
                    },
                    {
                        name: '小程序设计',
                        children: []
                    }
                ]
            }
        ];
        window.onload = function () {
            first();
        }
        var all = document.getElementById("tree");


        function first() {
            tree.forEach(function (item) {
                var lis = show(item);
                all.innerHTML += lis;
            });
        }

        function show(item) {
            var li = '';
            var ul = '';
            console.log(item.children.length);
            ul = `<ul style="display:block;">`;
            if (item.children.length > 0) {
                li = `<li><span onclick="plus(this)" class="span">-</span>${item.name}</li>`;
                for (var i = 0; i < item.children.length; i++) {
                    ul += show(item.children[i]);
                }
            } else {
                li = `<li>${item.name}</li>`;
            }
            ul += `</ul>`;
            li += ul;
            return li;
        }

        function plus(obj){
            event.stopPropagation();
            var ul =  obj.parentElement.nextElementSibling;
            ul.style.display = ( ul.style.display == "block")?"none":"block";
            obj.innerHTML = (obj.innerHTML == "+")?"-":"+";
        }
    </script>
</body>

</html>